<!--
 * @Description:
 * @Version: 0.1
 * @Author: EveChee
 * @Date: 2020-05-25 11:58:21
 * @LastEditTime: 2020-10-26 11:07:58
-->
<template>
    <div id="mfe-main" ref="main">
        <SideBar :collapse="false" :routes="routes" @new-container="changeContainer"></SideBar>
    </div>
</template>
<script lang="ts">
import { Component, Vue, Ref } from 'vue-property-decorator'
import SideBar from '@/components/SideBar/index.vue'
import { staticRoutes } from '@/router'

@Component({
    components: { SideBar },
})
export default class App extends Vue {
    @Ref()
    readonly main: any
    routes = [...staticRoutes]
    changeContainer(id:string){
        // const div = createElement(id)
        // this.main.appendChild(div)
    }
}
function createElement(id:string){
    const div = document.createElement('div')
    div.id = id
    div.className = 'application-container'
    return div
}

</script>

<style lang="less">
#mfe-main {
    height: 100%;
    width: 100%;
    min-width: 1200px;
    display: flex;
    > .application-container {
        height: 100%;
        min-height: 860px;
        min-width: 1200px;
        overflow: hidden;
        flex: 1;
        width:100%;
    }
}
</style>
